<template>
  <el-row style="background: #fff">
    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" style="">
      <ElCard shadow="hover">
        <div class="flex ">
         <div class="w-[50%]">
          <el-date-picker
          v-model="daterange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          style="width: 100%"
        />
         </div>
        <el-form-item class="ml10">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
        </div>
      </ElCard>
    </el-col>
    <ElCol
      v-for="item in totalList"
      :key="item.key"
      :xl="6"
      :lg="6"
      :md="12"
      :sm="12"
      :xs="24"
    >
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated :rows="2">
          <template #default>
            <div :class="`${prefixCls}__item flex justify-between`">
              <div>
                <div
                  :class="`${prefixCls}__item--icon ${prefixCls}__item--peoples p-16px inline-block rounded-6px`"
                >
                  <Icon :icon="item.icon" :size="40" />
                </div>
              </div>
              <div class="flex flex-col justify-between">
                <div
                  :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
                >
                  {{ t(item.title) }}
                </div>
                <CountTo
                  class="text-20px font-700 text-right"
                  :start-val="0"
                  :end-val="item.value"
                  :duration="2600"
                />
              </div>
            </div>
          </template>
        </ElSkeleton>
      </ElCard>
    </ElCol>
  </el-row>
  <ElRow :gutter="20" justify="space-between" class="mt10" :class="prefixCls">
    <ElCol
      v-for="item in panelList"
      :key="item.key"
      :xl="6"
      :lg="6"
      :md="12"
      :sm="12"
      :xs="24"
    >
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated :rows="2">
          <template #default>
            <div :class="`${prefixCls}__item flex justify-between`">
              <div>
                <div
                  :class="`${prefixCls}__item--icon ${prefixCls}__item--peoples p-16px inline-block rounded-6px`"
                >
                  <Icon :icon="item.icon" :size="40" />
                </div>
              </div>
              <div class="flex flex-col justify-between">
                <div
                  :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
                >
                  {{ t(item.title) }}
                </div>
                <CountTo
                  class="text-20px font-700 text-right"
                  :start-val="0"
                  :end-val="item.value"
                  :duration="2600"
                />
              </div>
            </div>
          </template>
        </ElSkeleton>
      </ElCard>
    </ElCol>
  </ElRow>
</template>

<script setup>
import { ElRow, ElCol, ElCard, ElSkeleton } from "element-plus";
import { useDesign } from "@/hooks/web/useDesign";
import { useI18n } from "@/hooks/web/useI18n";
import { ref, reactive, onMounted, computed } from "vue";
import CountTo from "@cps/common/CountTo";
import AnalysisApi from "@/apis/dashboard/analysis";

const { getPrefixCls } = useDesign();
const { t } = useI18n();
const daterange = ref([]);

// 格式化 yyyy-MM-dd
const formatDate = (date) => {
  const d = new Date(date);
  const year = d.getFullYear();
  const month = `0${d.getMonth() + 1}`.slice(-2);
  const day = `0${d.getDate()}`.slice(-2);
  return `${year}-${month}-${day}`;
};

// 统一获取当前时间范围
const rangDate = computed(() => {
  const [start, end] = daterange.value || [];
  return {
    start_time: start ? formatDate(start) : null,
    end_time: end ? formatDate(end) : null,
  };
});

const handleSearch = () => {
  // 可执行请求或 emit 搜索事件
  getTotalCount();
};
const handleReset = () => {
  daterange.value = [];
};
const loading = ref(true);
const prefixCls = getPrefixCls("panel");

const totalList = ref([]);
const panelList = ref([
  {
    key: "users",
    title: "今日新增用户",
    icon: "svg-icon:peoples",
  },
  {
    key: "messages",
    title: "自有工地",
    icon: "svg-icon:message",
  },
]);

const getCount = async () => {
  try {
    const res = await AnalysisApi.getAnalysis().then((res) => {
      panelList.value = res.data.panelList;
    });
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
};
const getTotalCount = async () => {
  try {
    const res = await AnalysisApi.getTotalCount({ ...rangDate.value }).then(
      (res) => {
        totalList.value = res.data.totalList;
      }
    );
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
};
onMounted(() => {
  getCount();
  getTotalCount();
});
</script>

<style lang="less" scoped>
@prefix-cls: ~"@{adminNamespace}-panel";

.@{prefix-cls} {
  &__item {
    &--peoples {
      color: #40c9c6;
    }

    &--message {
      color: #36a3f7;
    }

    &--money {
      color: #f4516c;
    }

    &--shopping {
      color: #34bfa3;
    }

    &:hover {
      :deep(.@{adminNamespace}-icon) {
        color: #fff !important;
      }
      .@{prefix-cls}__item--icon {
        transition: all 0.38s ease-out;
      }
      .@{prefix-cls}__item--peoples {
        background: #40c9c6;
      }
      .@{prefix-cls}__item--message {
        background: #36a3f7;
      }
      .@{prefix-cls}__item--money {
        background: #f4516c;
      }
      .@{prefix-cls}__item--shopping {
        background: #34bfa3;
      }
    }
  }
}
</style>
